<template>
  <div class="listTemplate">
    <header class="t-header">
      <mu-button flat small class="t-close" v-close>
        <i class="iconfont iconangle-left"></i>
      </mu-button>
      <span class="t-title">平面图列表</span>
    </header>
    <section class="t-body">
      <mu-paper class="demo-paper" :z-depth="2">
        <section class="areaTitle">所属区域：A区·10</section>
      </mu-paper>
      <mu-container ref="container" class="demo-loadmore-content">
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <mu-list>
            <section v-for="(i,index) in data" :key="index">
              <mu-paper class="demo-paper" :z-depth="2">
                <section class="box" @click="$router.push('/recordDetial')">
                  <p class="line-list flex_b">
                    <span class>项目名称：{{i.orgName}}</span>
                    <!-- <mu-button small color="success">进行中</mu-button> -->
                    <!--<mu-badge small content="进行中" color="primary"></mu-badge>-->
                  </p>
                  <p class="line-list textdot">
                    <span>检查部位：{{i.checkParts}}</span>
                  </p>
                  <p class="line-list">
                    <span>所属区域：{{i.areaName}}</span>
                  </p>
                  <p class="line-list textdot">
                    <span>任务描述：{{i.description}}</span>
                  </p>
                  <p class="line-list">
                    <span>检查时限：{{i.endTime}}</span>
                  </p>
                  <p class="line-list">
                    <span>生效日期：{{i.startTime}}</span>
                  </p>
                  <p class="line-list">
                    <span>上次检查时间：{{i.lastCheckTime}}</span>
                  </p>
                  <p class="line-list flex_b">
                    <span>检查频率：{{i.checkFrequency}}</span>
                    <span>检查率：{{i.checkRate}}</span>
                  </p>
                  <p class="line-list flex_b">
                    <span>检查人：{{i.checkUserName}}</span>
                    <span>责任人：{{i.responsibleUserName}}</span>
                  </p>
                </section>
              </mu-paper>
            </section>
          </mu-list>
        </mu-load-more>
      </mu-container>
    </section>
  </div>
</template>

<script>
export default {
  name: "mainPage",
  data() {
    return {
      data: [],
      num: "",
      refreshing: false,
      loading: false,
      text: "List",
      open: false
    };
  },
  mounted() {
    this.fetch();
  },
  created() {
    console.log(this.$A.GUP());
  },
  methods: {
    //获取列表页接口
    fetch() {
      let params = {
        areaid: 162242530266579350
      };
      this.$A.Go("get", "/safety/checkPlan/pageList", params).then(success => {
        if (success.code == 200) {
          this.data = success.body.rows;
          this.num = success.body.page.rows;
        }
      });
    },
    closeBottomSheet(isnot) {
      this.open = isnot;
    },
    refresh() {
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        this.text = this.text === "List" ? "Menu" : "List";
        this.num = 20;
      }, 2000);
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.num += 20;
      }, 2000);
    }
  }
};
</script>
<style lang="scss" scoped>
.listTemplate {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  .t-header {
    height: 0.45rem;
    width: 100%;
    color: #3d3d3d;
    box-sizing: border-box;
    padding: 5px 8px;
    position: relative;
    background-color: #fff;
    // box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .t-close {
      min-width: 28px;
      border-radius: 50%;
    }
    .t-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.19rem;
      font-weight: 500;
    }
    .t-right-icon {
      font-size: 0.2rem;
    }
  }
  .t-body {
    height: calc(100% - 0.45rem);
    width: 100%;
    overflow: auto;
    background-color: #f8f8f8;
  }
  .t-body + .t-footer {
    height: 0.45rem;
    width: 100%;
  }
  .t-footer + .t-body {
    height: calc(100% - 0.9rem);
  }
  // 自定义样式
  .areaTitle {
    margin-top: 5px;
    font-size: 0.19rem;
    padding: 10px 20px;
  }
  .box {
    padding: 10px;
    margin-bottom: 5px;
  }
  .line-list {
    margin: 5px 0;
    font-size: 0.15rem;
  }
  .textdot {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.flex_b {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<style lang="scss">
.t-close {
  .mu-button-wrapper {
    padding: 0 !important;
  }
}
</style>
